<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-02-09 18:41:23
-->
<template>
    <div class="video-info">
        <!-- 作者 -->
        <div class="auther">
            <div class="block">
                <img :src="showAvater" alt="">
            </div>
            <span @click="goSinger">{{ creator }}</span>
        </div>
        <!-- 标题 -->
        <div class="title">
            <h2>{{ props.videoinfo.name }}</h2>
            <span class="iconfont icon-below-s" v-if="info.iconFlag == true" @click="showDesc"></span>
            <span class="iconfont icon-top-s" v-else @click="showDesc"></span>
        </div>
        <!-- 时间 -->
        <div class="time">
            <span style="color: #cccce6;">发布: {{ publishTime }}</span>
            <span style="color: #cccce6;">播放: {{ props.videoinfo.playCount || props.videoinfo.playTime }}次</span>
        </div>
        <!-- 描述 -->
        <div class="desc" v-if="info.showDes">
            #{{ props.videoinfo.desc || props.videoinfo.description }}
        </div>
        <!-- 操作 -->
        <div class="opreation">
            <el-button class="iconfont icon-dianzan" :type="props.islike ? 'primary' : 'default'" @click="likeVideo">{{
                props.islike ?
                '已赞' + '(' + props.likedCount + ')' : '赞' + '(' + props.likedCount + ')'
            }}</el-button>
            <el-button :icon="props.isSub ? 'FolderChecked' : 'FolderAdd'" :type="props.isSub ? 'primary' : 'default'"
                @click="subMv">{{
                    props.isSub ? '已收藏' : '收藏'
                }}</el-button>
            <el-button icon="Share">分享({{ props.shareCount }})</el-button>
        </div>

    </div>
</template>

<script setup>
import { isArray } from 'lodash';
import { computed, getCurrentInstance, reactive, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user.js'
import { ElMessage } from 'element-plus'
import { useDateFormat } from '@vueuse/core'
const info = reactive({
    iconFlag: true,
    showDes: false,

})
const user = useUserStore()
const props = defineProps({
    videoinfo: {
        type: Object,
        default: {}
    },
    type: {
        type: String,
        default: ''
    },
    //是否收藏
    isSub: {
        type: Boolean,
        default: false
    },
    islike: {
        type: Boolean,
        default: false
    },
    likedCount: Number,
    // commentCount: Number,
    shareCount: Number,
})
const emit = defineEmits(['subMvBy', 'likeVideoBy'])

const router = useRouter()
//作者头像
const showAvater = computed(() => {
    return props.type == 'mv' ? isArray(props.videoinfo.artists) && props.videoinfo.artists[0].img1v1Url : props.videoinfo.avatarUrl
})
//作者名字
const creator = computed(() => {
    return props.videoinfo.artistName || props.videoinfo.creator?.nickname
})
//跳转到歌手详细页面
function goSinger() {
    router.push('/singerdetail/' + props.videoinfo.artistId)
}
const publishTime = computed(() => {
    nextTick()  //下一次dom更新后立即执行下面代码
    return useDateFormat(props.videoinfo.publishTime, 'YYYY-MM-DD').value
})

//展示描述
function showDesc() {
    info.showDes = !info.showDes
    info.iconFlag = !info.iconFlag
}

//点赞视频
function likeVideo() {
    if (!user.isLogin) {
        ElMessage({
            type: 'warning',
            message: '登录后才能点赞',
            showClose: true,
            center: true
        })
        return;
    }
    emit('likeVideoBy')
}
//收藏视频
function subMv() {
    if (!user.isLogin) {
        ElMessage({
            type: 'warning',
            message: '登录后才能收藏',
            showClose: true,
            center: true
        })
        return;
    }
    emit('subMvBy')
}
</script> 

<style lang="scss" scoped>
.video-info {
    margin-top: 20px;

    .auther {
        display: flex;
        align-items: center;
        padding-top: 15px;

        span {
            padding-left: 10px;
            cursor: pointer;
        }

        .block {
            width: 50px;
            height: 50px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .title {
        display: flex;
        align-items: center;
        margin-top: 25px;

        span {
            margin-left: 5px;
            cursor: pointer;
        }
    }

    .time {
        margin-top: 10px;

        span {
            padding-right: 30px;
        }
    }

    .desc {
        margin-top: 20px;
    }

    .opreation {
        margin-top: 20px;
    }
}

:deep(.el-button) {
    padding: 8px 30px;
    border-radius: 20px;
}

:deep(.el-button:hover) {
    background-color: #f2f2f2;
    border-color: #bebaba;
    color: black;
}

:deep(.el-button:focus) {
    background-color: #f2f2f2;
    border-color: #bebaba;
    color: black;
}
</style>